<%@ page import="com.alibaba.fastjson.JSONArray" %>
<%@ page import="com.school.movie.business.web.model.vo.HallSeatVo" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>影院热映大片_热映电影票房_高清电影影视大全</title>
    <meta name="keywords" content="影院热映大片,热映电影票房,热映电影购票,热映电影打分,热映电影选座">
    <meta name="description" content="为您提供热映电影大片选座购票服务，以及对热映电影评分、评价等信息介绍">
    <meta http-equiv="cleartype" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/jquery-easyui-1.3.0/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/seat/jq22.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/seat/head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/common.d1d257d3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/cinemas-cinema.608c31e5.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/cinemas-list.d5916a9a.css">
</head>
<body>
<jsp:include page="top.jsp">
    <jsp:param name="menuId" value="3"/>
</jsp:include>
<div class="banner cinema-banner">
    <div class="wrapper clearfix">
        <div class="cinema-left">
            <div class="avatar-shadow">
                <img class="avatar" src="${pageContext.request.contextPath}/${movie.cimg}" alt="${movie.movieName}">
                <div class="avatar-num">${movie.movieName}</div>
            </div>
        </div>
        <div class="cinema-main clearfix">
            <div class="cinema-brief-container">
                <h1>${movie.movieName}</h1>
                <div class="address text-ellipsis">${plan.hallName}【${plan.playDay}${plan.playTimeName}】</div>
                <div class="telphone">票价：${plan.seatPrice}元/座</div>
                <div class="features-group">
                    <div class="group-title">影厅设施</div>
                    <div class="feature">
                        <span class="tag ">影厅类型</span>
                        <p class="desc text-ellipsis" title="${plan.hallTypeName}">${plan.hallTypeName}</p>
                    </div>
                    <div class="feature">
                        <span class="tag ">放映时间</span>
                        <p class="desc text-ellipsis" title="${plan.startTime}">${plan.startTime}-${plan.endTime}</p>
                    </div>
                    <div class="feature">
                        <span class="tag ">评分</span>
                        <p class="desc text-ellipsis" title="9">${movie.score}分</p>
                    </div>
                    <div class="feature">
                        <span class="tag ">想看人数</span>
                        <p class="desc text-ellipsis" title="${movie.hopeLook}">${movie.hopeLook}人</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container" id="app">
    <div class="crumbs-nav-container"></div>
    <div class="cinemas-list">
        <h2 class="cinemas-list-header">${plan.hallName}选座表</h2>
        <br/>

        <div class="container" style="min-height: 450px;">
            <div class="demo clearfix">
                <!---左边座位列表----->

                <div id="seat_area">
                    <div class="front">屏幕</div>
                </div>

                <!---右边选座信息----->

                <div class="booking_area" style="margin-top: 23px">

                    <p>电影：<span>《${movie.movieName}》</span></p>

                    <p>时间：<span>${plan.startTime} -> ${plan.endTime}</span></p>

                    <p>座位：</p>

                    <ul id="seats_chose"></ul>

                    <p>票数：<span id="tickects_num">0</span></p>

                    <p>总价：<b>￥<span id="total_price">0</span></b></p>

                    <div id="legend"></div>

                </div>

            </div>

        </div>

        <fieldset style="border-color: red">
            <legend>选座付款</legend>
            <input type="hidden" name="mobile" id="mobile" value="${member.mobile}">
            <table align="center" style="width:98%" border="0">
                <tr height="40">
                    <td align="right" valign="middle">
                        支付类型：<select name="payType" id="payType">
                        <option value="微信">微信</option>
                        <option value="支付宝">支付宝</option>
                        <option value="银联">银联</option>
                        <option value="其他">其他</option>
                    </select>
                    <td style="width: 100px;">
                        <div class="buy-btn">
                            <a href="javascript:void(0);" id="buy-ticket-btn" data-act="buy-btn-click">购票付款</a>
                        </div>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    <div class="related-cinemas">
        <h3>相关影院</h3>
        <c:forEach items="${agentList}" var="v">
            <a target="_blank"
               href="${pageContext.request.contextPath}/front/index/agentDetail?agentId=${v.agentId}">${v.agentName}</a>
        </c:forEach>
    </div>
</div>

<jsp:include page="bottom.jsp"/>

</body>
</html>

<%
    List<HallSeatVo> seatList = (List<HallSeatVo>) request.getAttribute("seatList");
    String s = JSONArray.toJSONString(seatList);
%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">

    let radix = 10000;
    let price = parseInt((parseFloat('${plan.seatPrice}') * radix).toString()); //电影票价

    $(document).ready(function () {

        var $cart = $('#seats_chose'), //座位区

            $tickects_num = $('#tickects_num'), //票数

            $total_price = $('#total_price'); //票价总额

        let selectedSeatIds = new Set();
        let seatIdsMap = new Map();
        let map = [], seats = JSON.parse('<%=s%>'), hasSold = [], idx = 0;
        //生成座位列表
        for (let i = 1; i <= '${hall.row}'; i++) {
            let col = '';
            for (let j = 1; j <= '${hall.col}'; j++) {
                let position = i + '_' + j;
                let seat = seats[idx++];
                if (seat.state === 1) {
                    col += 'c'
                    seatIdsMap.set(position, seat.hallSeatId)
                } else if (seat.state === 2) {
                    col += '_'
                    seatIdsMap.set(position, seat.hallSeatId)
                } else {
                    col += 'c'
                    hasSold.push(position)
                }
            }
            map.push(col)
        }

        let sc = $('#seat_area').seatCharts({

            // map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
            //
            //     'cccccccccc',
            //
            //     'ccccaccccc',
            //
            //     '__________',
            //
            //     'cccccccc__',
            //
            //     'cccccccccc',
            //
            //     'cccccccccc',
            //
            //     'cccccccccc',
            //
            //     'cccccccccc',
            //
            //     'cccccccccc',
            //
            //     'cc__cc__cc'
            // ],

            map: map,

            naming: {//设置行列等信息

                top: false, //不显示顶部横坐标（行）

                getLabel: function (character, row, column) { //返回座位信息

                    return column;

                }

            },

            legend: {//定义图例

                node: $('#legend'),

                items: [

                    ['c', 'available', '可选座'],

                    ['c', 'unavailable', '已售出']

                ]

            },

            click: function () {

                if (this.status() === 'available') { //若为可选座状态，添加座位
                    selectedSeatIds.add(seatIdsMap.get(this.settings.id));

                    $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')

                        .attr('id', 'cart-item-' + this.settings.id)

                        .data('seatId', this.settings.id)

                        .appendTo($cart);

                    $tickects_num.text(sc.find('selected').length + 1); //统计选票数量

                    $total_price.text((getTotalPrice(sc) + price) / radix);//计算票价总金额

                    return 'selected';

                } else if (this.status() === 'selected') { //若为选中状态
                    selectedSeatIds.delete(seatIdsMap.get(this.settings.id))

                    $tickects_num.text(sc.find('selected').length - 1);//更新票数量

                    $total_price.text((getTotalPrice(sc) - price) / radix);//更新票价总金额

                    $('#cart-item-' + this.settings.id).remove();//删除已预订座位

                    return 'available';

                } else if (this.status() === 'unavailable') { //若为已售出状态

                    return 'unavailable';

                } else {
                    return this.style();
                }

            }

        });

        //设置已售出的座位
        // sc.get(['1_2', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');
        sc.get(hasSold).status('unavailable');

        $("#buy-ticket-btn").click(function () {
            if ($("#mobile").val() == "") {
                alert("请登录后再购票");
                window.location.href = '${pageContext.request.contextPath}/front/index/v/PAY_TO_SEAT?planId=' + ${plan.planId};
                return;
            }
            let ids = Array.from(selectedSeatIds).join(',');
            console.log(ids);
            location.href = '${pageContext.request.contextPath}/front/index/v/addOrder?seatIds=' + ids + "&planId=${plan.planId}&payType=" + $("#payType").val();
        })

    });

    function getTotalPrice(sc) { //计算票价总额

        var total = 0;

        sc.find('selected').each(function () {
            total += price;
        });

        return total;

    }


</script>
